{% extends "v2ex/_base.html" %}
{% block title %}{{ data.title }}{% endblock %}
{% block rightbar %}{% endblock %}
{% block body %}
<div class="sep20"></div>
<div class="box">
    <div class="header" >
        <a href="#">SJZLUG</a>
        <span class="chevron"><span class="chevron">&nbsp;›&nbsp;</span>创作新主题</span>
    </div>
    <div style="display:none;">
        <form  method="post" id = "newpostform">
            {{data.form.hidden_tag()}}
            {{ data.form.title(placeholder="标题",class="form-control") }}
            {{ data.form.content_html(placeholder="正文内容",class="form-control") }}
            {{ data.form.cateid(placeholder="cateid",class="form-control") }}
            {{ data.form.subcateid(placeholder="subcateid",class="form-control") }}
        </form>
    </div>
    <div class="cell">
        <div class="fr fade" id="title_remaining">120</div>
        主题标题
    </div>
    <div class="cell" style="padding: 0px; background-color: #fff;">
        <textarea class="msl" rows="1" maxlength="120" id="topic_title" name="title" autofocus="autofocus" placeholder="请输入主题标题，如果标题能够表达完整内容，则正文可以为空"></textarea>
    </div>
    <div class="cell">
        <div class="fr fade" id="content_remaining">20000</div>
        正文
    </div>
    <div class="cell" style = "padding:0px;margin:0px;">
        <div id="test-editormd" style="margin-bottom:0px;">
            <textarea style="display:none;">主题内容</textarea>
        </div>
    </div>
    <div class="cell">
        <select name="cate_name" id="cates" style="width: 200px; font-size: 14px;">
            <option value="">请选择一个分类</option>
            {% for c in data.cate %}
                <option value="{{ c.id }}">{{ c.name }}</option>
            {% endfor %}
        </select>
        <select name="subcate_name" id="subcates" style="width: 200px; font-size: 14px;">
        </select>
    </div>
    <div class="cell">
        最热分类 &nbsp; <a href="javascript:chooseNode('qna')" class="node">问与答</a> &nbsp;<a href="javascript:chooseNode('share')" class="node">分享发现</a> &nbsp;<a href="javascript:chooseNode('jobs')" class="node">酷工作</a> &nbsp;<a href="javascript:chooseNode('programmer')" class="node">程序员</a> &nbsp;<a href="javascript:chooseNode('macos')" class="node">macOS</a> &nbsp;<a href="javascript:chooseNode('create')" class="node">分享创造</a> &nbsp;<a href="javascript:chooseNode('python')" class="node">Python</a> &nbsp;<a href="javascript:chooseNode('iphone')" class="node">iPhone</a> &nbsp;<a href="javascript:chooseNode('android')" class="node">Android</a> &nbsp;<a href="javascript:chooseNode('apple')" class="node">Apple</a> &nbsp;<a href="javascript:chooseNode('bb')" class="node">宽带症候群</a> &nbsp;<a href="javascript:chooseNode('linux')" class="node">Linux</a> &nbsp;<a href="javascript:chooseNode('cv')" class="node">求职</a> &nbsp;<a href="javascript:chooseNode('mbp')" class="node">MacBook Pro</a> &nbsp;
    </div>
    <div class="cell">
        <div class="fr">
            <button id = "btn_send" class="super normal button"><span class="glyphicon glyphicon-send"></span>&nbsp; 发布主题</button>
        </div>
        <button id = "btn_watch" class="super normal button"><span class="glyphicon glyphicon-eye-open"></span>&nbsp; 预览主题</button>
    </div>
</div>
<div class="sep20"></div>
<link rel="stylesheet" type="text/css" media="screen" href="/static/v2ex/js/plugs/editor.md/editormd.min.css" />
<script src="/static/v2ex/js/plugs/editor.md/editormd.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "100%",
            height  : 460,
            toolbar : false,
            watch   : false,
            saveHTMLToTextarea : true,
            syncScrolling : false,
            path    : "/static/v2ex/js/plugs/editor.md/lib/"
        });
    });

    $('#btn_send').click(function(){
        $("#btn_send").attr('disabled',true);
        var form= document.getElementById("newpostform");
        if (form){
            form.title.value = $("#topic_title")[0].value;
            form.content_html.value = testEditor.getHTML();
            form.cateid.value = $("#cates")[0].value;
            form.subcateid.value = $("#subcates")[0].value;
            form.action="{{ url_for('main.newpost') }}";
            form.submit();
        }
        $("#btn_send").attr('disabled',false);
    });

    $('#btn_watch').click(function(){
        testEditor.previewing();
        return false;
    });

    $('select#cates').change(function(){
        var cid = $(this).val();
        console.log(cid);  
        if (cid != ""){
            $.get("/subcates/"+cid,function(data,status){
                //alert("数据：" + data + "\n状态：" + status);
                if (status == "success"){
                    $('select#subcates').empty();
                    $('select#subcates').append("<option value=''>请选择一个子分类</option>");
                    for(var i=0;i<data.data.length;i++){
                        $('select#subcates').append("<option value='"+ data.data[i].id +"'>" + data.data[i].name + "</option>");
                    }
                }
            });
        }
    });

});
</script>
{% endblock %}
